import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import { connect } from 'react-redux'
import { goToLogin } from '@/utils/login'
const blueLicense = 'https://static3.jekunauto.com/img/others/blue-license.png'
const greenLicense = 'https://static3.jekunauto.com/img/others/green-license.png'
import './style.scss'

interface State {
  carInfo?: ICar | null
  loaded: boolean
}
@connect<any>(({ user }) => ({
  user
}))
export default class CarInfo extends Component<any, State> {
  constructor (props) {
    super(...arguments)

    this.state = {
      loaded: props.loaded
    }
  }

  componentDidMount() { }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!this.state.loaded) {
      this.setState({
        loaded: true
      })
    }
  }

  handleGotoendit(e, carLicense, currentMileage) {
    e.stopPropagation()
    Taro.navigateTo({
      url: `/pages/car/mileage/index?carLicense=${carLicense}&currentMileage=${currentMileage}`
    })
  }

  carStyleView() {
    // eslint-disable-next-line no-shadow
    const { carInfo, disabled, user } = this.props
    return (
      <View className='carinfo-content-2'>
        {
          carInfo ? (
            <View key={carInfo.id} onClick={() => {
              if (disabled) return
              Taro.navigateTo({
                url: '/pages/car/list/index'
              })
            }} className={classnames('carinfo-havecar-2', {
              'hide': !carInfo
            })}
            >
              <View className='carinfo-lf'>
                <View className='carinfo-lf-top'>
                  <Image className='carinfo-logo' src={carInfo.brandLogoUrl} mode='aspectFit' />
                  <View className='carinfo-license'>
                    <View className='carinfo-license-bg'>
                      {
                        carInfo.isNewEnergy ? (
                          <Image className='carinfo-license-green' src={greenLicense} mode='aspectFit' />
                        ) : (
                          <Image className='carinfo-license-blue' src={blueLicense} mode='widthFix' />
                        )
                      }
                    </View>
                    <View className='carinfo-license-name'>{carInfo.carLicense}</View>
                  </View>
                </View>
                <View className='carinfo-context'><View className='text'>{carInfo.seriesName + carInfo.modelName}</View></View>
              </View>
              <View className='mileage-car'>
                <View className='mileage-car-icon'><Image src='https://static3.jekunauto.com/img/assistant/ico_2.png'></Image></View>
                <View>{carInfo.currentMileage} km</View>
                <View className='mileage-car-eidt' onClick={(e) => this.handleGotoendit(e, carInfo.carLicense, carInfo.currentMileage)}><Image src='https://static3.jekunauto.com/img/assistant/ico_8.png'></Image></View>
              </View>
              {/* <Image className='carinfo-carimg-self' src={carInfo.carImageUrl} mode='aspectFit' /> */}
            </View>
          ) : (
            <View onClick={() => {
              if (user.userInfo.accessId) {
                Taro.navigateTo({
                  url: '/pages/car/add/index'
                })
              } else {
                goToLogin()
              }
            }} className={classnames('carinfo-nohavecar-2', {
              'hide': carInfo
            })}
            >
              <View className='carinfo-icon'><Iconfont size='88' color='#999' name='icon-tianjiacheliang_huabanfuben' /></View>
              <View className='carinfo-context'>请先设置默认车辆信息</View>
              <View className='carinfo-addbtn'>去添加</View>
            </View>
          )
        }

      </View>
    )
  }

  render() {
    const { loaded } = this.state
    return <View className='car'>{this.carStyleView()}</View>
  }
}
